<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        li{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        img{
            width: 100px;
            height: 100px;
        }
        p{
            margin: 0;
            padding: 0;
        }
        button{
            background-color: #f00;
            color: #fff;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <ul>
            <li v-for="(item,index) in shoparr" :key="item.id">
                <input type="checkbox" @click="jisuanzong(item)" :checked="item.checkeda">
                <img :src="item.img" alt="">
                <p>{{item.name}}</p>
                <p>{{item.price * item.count | formatPrice}}</p>
                <button @click="add(index)">+</button>
                <p v-text="item.count">1</p>
                <button @click="reduce(index)">-</button>
                <button @click="del(index)">删除</button>
            </li>
        </ul>
        <input type="checkbox" @click="allchecks()" :checked="allcheck">全选
        <button @click="delall()">清理购物车</button>
        <h2>总计:{{zong | formatPrice}}</h2>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                shoparr:[{
                    id:1,
                    name:'苹果16promax',
                    price:9999,
                    img:'https://2c.zol-img.com.cn/product/269_800x600/554/ce5kCxbsxgjDc.jpg',
                    count:1,
                    checkeda:false
                },{
                    id:2,
                    name:'华为畅享9',
                    price:8999,
                    img:'https://pic.616pic.com/ys_bnew_img/00/39/32/k5PSyn3GRw.jpg',
                    count:1,
                    checkeda:false
                },{
                    id:3,
                    name:'小米8',
                    price:6999,
                    img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.qq23B66HKEmz3TEDeENiEQHaEA?rs=1&pid=ImgDetMain',

                    count:1,
                    checkeda:false
                },{
                    id:4,
                    name:'OPPO Reno5',
                    price:5999,
                    img:'https://ts1.tc.mm.bing.net/th/id/R-C.6c829bd2a722add67510a19b85ea383f?rik=fAdWX9BBIzPwEA&riu=http%3a%2f%2fimg.aiimg.com%2fuploads%2fuserup%2f0903%2f26123Ra134.jpg&ehk=ZtU%2fTSsnRfo9PfjiFIU4ENLbXMJqY%2foZuYgGGnJdx5U%3d&risl=&pid=ImgRaw&r=0',
                    count:1,
                    checkeda:false
                },{
                    id:5,
                    name:'vivo X20',
                    price:4999,
                    img:'https://bpic.588ku.com/back_origin_min_pic/23/06/11/1315f9dae321223fd0942ee687d1fb74.jpg!/fw/750/quality/99/unsharp/true/compress/true',
                    count:1,
                    checkeda:false
                }],
                allcheck:false
            },
            methods: {
                add: function(index){
                    this.shoparr[index].count++;
                },
                reduce: function(index){
                    if(this.shoparr[index].count>1){
                        this.shoparr[index].count--;
                    }
                },
                del: function(index){
                    this.shoparr.splice(index,1);
                },
                jisuanzong: function(item){
                    if(item.checkeda){
                        item.checkeda = false;
                        this.allcheck = false;
                    }else{
                        item.checkeda = true;
                        this.allcheck = this.shoparr.every(item => item.checkeda == true)
                    }
                },
                delall: function(){
                    this.shoparr = [];
                },
                allchecks: function(){
                    this.allcheck = !this.allcheck;
                    for(let i=0;i<this.shoparr.length;i++){
                        this.shoparr[i].checkeda = this.allcheck;
                    }
                }
            },
            computed: {
                zong: function(){
                    let zong = 0;
                    for(let i=0;i<this.shoparr.length;i++){
                        if(this.shoparr[i].checkeda){
                            zong += this.shoparr[i].price * this.shoparr[i].count;
                        }
                    }
                    return zong;
                }
            },            
            filters:{
                formatPrice: function(value){
                    return '¥'+value.toFixed(2);
                }
            }
        })
    </script>
</body>
</html>